import React from "react";
import { ClumnContainer } from "./ClumnSwiper.style"
import { connect } from "react-redux"
import { useNavigate } from "react-router-dom"

const ClumnSwiper = (props) => {

    // const { rotationItem } = props

    const navigate = useNavigate()
    // 解构redux的状态
    const { homedata = [] } = props;
    // 解构父子之间传的id值
    const { id } = props;
    // 通过传入的变量拿到对象的属性，需要用到 [`${变量}`]来拿到
    const rotationItem = homedata[`${id}`] || [];

    const { describe, itemList = [] } = rotationItem

    const goto = (prop) => {
        console.log(prop);
        navigate(`/home/${prop.id}`, { state: { datas: prop } });
    }

    return (
        <ClumnContainer>
            <div className="ClumnSwiperContainer">
                <div className="title">{describe}</div>
                <div className="cards">
                    {
                        itemList.map((item) => {
                            return (
                                <div className="cardItem" key={item.id} onClick={() => goto(item)} >
                                    <div className="ImagBox">
                                        <img src={item.picUrl} />
                                    </div>
                                    <div className="cardTitle">{item.title}</div>
                                    <div className="cardDesc">{item.desc}</div>
                                    <div className="cardPrice">￥{item.prc}</div>
                                </div>
                            )

                        })
                    }
                </div>
            </div>

        </ClumnContainer>
    )
}
const mapStateToPorps = (state) => {
    return {
        homedata: state.home.homedata
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getHomeData())
        }
        // getMainDataDispatch: actionTypes.getHomeData
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(ClumnSwiper)
